<script setup lang="ts">
import { ref, watch } from 'vue'
// 使用defineProps接收父组件传递的v-model绑定的值
const props = defineProps({
  modelValue: Boolean,
  footer: {
    type: Object,
    default: {
      headImgUrl: 'https://oss.upyun.mitkimi.com/common/mitkimi.default.png',
      tip: 'need more information?',
      action: 'Ask AI assistant'
    }
  },
  useFooter: {
    type: Boolean,
    default: false
  }
});

// 创建一个本地的响应式数据，与父组件传入的modelValue同步
const isVisible = ref(props.modelValue)

// 当本地的isVisible改变时，通过emit通知父组件
const emit = defineEmits(['update:modelValue', 'callback']);

const closeDialog = () => {
  isVisible.value = false;
  emit('update:modelValue', false);
}

const handleAction = () => {
  emit('callback')
}

// 监听父组件传入的modelValue变化
watch(() => props.modelValue, (newValue) => {
  isVisible.value = newValue;
})
</script>
<template>
  <div class="dialog-overlay" v-if="isVisible">
    <div class="dialog-content-container">
      <div class="dialog-header">
        <div class="close-button" @click="closeDialog">
          <ap-icon name="error-circle" color="var(--color-primary)" :size="32" />
        </div>
      </div>
      <div class="dialog-content">
        <slot></slot>
      </div>
      <div class="dialog-footer" v-if="useFooter">
        <img class="avatar" :src="props.footer.headImgUrl" />
        <div class="tip">{{ props.footer.tip }}</div>
        <div class="action">
          <ap-link href="javascript:;" @click="handleAction">{{ props.footer.action }}</ap-link>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" src="./FyiModal.less" scoped></style>